import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import {
	RecommendWrapper,
	RecommendItem
} from '../style';
import rmPic1 from '../../../statics/img/rm1.png';
import rmPic2 from '../../../statics/img/rm2.png';
import rmPic3 from '../../../statics/img/rm3.png';
import rmPic4 from '../../../statics/img/rm4.png';

class Recommend extends PureComponent {
	render() {
		const { list } = this.props;
		const imgList = {
			1: rmPic1,
			2: rmPic2,
			3: rmPic3,
			4: rmPic4
		}
		return (
			<RecommendWrapper>
				{
					list.map(item => (
						<RecommendItem imgUrl={imgList[item.get('imgUrl')]} key={item.get('id')} />
					))
				}
			</RecommendWrapper>
		)
	}
}

const mapStateToProps = (state) => ({
	list: state.getIn(['home', 'recommendList'])
})

export default connect(mapStateToProps, null)(Recommend);